<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>请求日志</title>
  <link rel="stylesheet" href="../static/index.css">
  <script src="../static/vue.js"></script>
  <link rel="stylesheet" href="../static/element_index.css">
  <script src="../static/index.js"></script>
  <script src="../static/axios.min.js"></script>
</head>
<style>
  .exit {
    position: absolute; top:0; left:20px; font-size:16px; cursor: pointer;
    display: inline-block;
    width: 50px;
    height: 50px;
    background:#66b1ff;
    text-align: center;
    line-height: 50px;
    color: white;
    border-radius: 50%;
  }
  .tables {
    margin-top: 50px;
  }
</style>
<body>
  <div id="app">
    <p class="exit"  v-on:click="returns">返回</p>
      <el-table
      class="tables"
      :data="tableData"
      style="width: 50%">
      <el-table-column
        prop="Formdata"
        label="请求表单"
        width="180">
      </el-table-column>
      <el-table-column
        prop="Host_url"
        label="主机地址"
        width="180">
      </el-table-column>
      <el-table-column
        prop="Remote_addr"
        label="请求源地址">
      </el-table-column>
    </el-table>
    </div>
  </div>

</body>
<script>
  var vm = new Vue({
    el: "#app",
    data() {
      return {
        tableData: []
      }
    },
    created() {
      this.get_log()
    },
    methods: {
      get_log() {
        axios.get("http://localhost:5000/viewlog").then(res => {
          console.log(res.data)
          this.tableData = res.data.content
        })
      },
      returns() {
        window.location.href = "http://localhost:5000";
      }
    }
  })
</script>

</html>
